<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
	page {
		background-color: #f6f7fb;
	}
	.container {
	  position: relative;
	  width: 100%;
	  height: 100vh;
	  background-color: #F5F7FA;
	  padding: 30rpx 20rpx;
	  box-sizing: border-box;
	  overflow-y: auto;
	}
	
	/* 页面头部 */
	.page-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 30rpx;
	  position: relative;
	}
	
	.page-title {
	  font-size: 36rpx;
	  font-weight: 600;
	  color: #303133;
	}
	
	.action-btn {
	  display: flex;
	  align-items: center;
	  // justify-content: center;
	  padding: 12rpx 24rpx;
	  font-size: 28rpx;
	  border-radius: 8rpx;
	  border: none;
	  color: #fff;
	  background-color: #409EFF;
	  box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
	  transition: all 0.3s ease;
	  height: 70rpx;
	  line-height: 1;
	  
	  &:active {
	    transform: translateY(2rpx);
	    box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.2);
	  }
	  
	  &.cancel-btn {
	    color: #606266;
	    background-color: #F5F7FA;
	    box-shadow: none;
	    
	    &:active {
	      transform: translateY(2rpx);
	    }
	  }
	  
	  &.small {
	    padding: 8rpx 16rpx;
	    font-size: 24rpx;
	    height: 50rpx;
	  }
	  
	  &.add-btn {
	    background-color: #409EFF;
	    
	    .uni-icons {
	      margin-right: 8rpx;
	    }
	  }
	  
	  &.edit-btn {
	    background-color: #F0F2F5;
	    color: #409EFF;
	    margin-right: 10rpx;
	    
	    .uni-icons {
	      margin-right: 0;
	    }
	  }
	  
	  &.delete-btn {
	    background-color: #F0F2F5;
	    color: #F56C6C;
	    
	    .uni-icons {
	      margin-right: 0;
	    }
	  }
	}
	
	/* 搜索过滤区 */
	.search-filter {
	  display: flex;
	  flex-direction: column;
	  margin-bottom: 30rpx;
	  position: relative;
	}
	
	.search-bar {
	  display: flex;
	  align-items: center;
	  background-color: #fff;
	  border-radius: 8rpx;
	  padding: 16rpx 24rpx;
	  margin-bottom: 20rpx;
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	  
	  .search-icon {
	    margin-right: 12rpx;
	  }
	  
	  .search-input {
	    flex: 1;
	    font-size: 28rpx;
	    color: #303133;
	  }
	}
	
	.filter-group {
	  display: flex;
	  justify-content: space-between;
	  background-color: #fff;
	  border-radius: 8rpx;
	  padding: 16rpx 24rpx;
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	  position: relative;
	  
	  .filter-item {
	    display: flex;
	    align-items: center;
	    font-size: 28rpx;
	    color: #606266;
	    position: relative;
	    
	    .uni-icons {
	      margin-left: 8rpx;
	      font-size: 24rpx;
	    }
	  }
	  
	  .filter-dropdown {
	    position: absolute;
	    top: 100%;
	    left: 0;
	    right: 0;
	    background-color: #fff;
	    border-radius: 0 0 8rpx 8rpx;
	    padding: 10rpx 0;
	    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	    z-index: 10;
	    
	    .filter-option {
	      padding: 16rpx 24rpx;
	      font-size: 28rpx;
	      color: #606266;
	      display: flex;
	      justify-content: space-between;
	      align-items: center;
	      
	      &:hover {
	        background-color: #F5F7FA;
	      }
	    }
	  }
	}
	
	/* 岗位列表 */
	.job-list {
	  position: relative;
	}
	
	.job-card {
	  background-color: #fff;
	  border-radius: 12rpx;
	  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	  padding: 30rpx;
	  margin-bottom: 20rpx;
	  transition: all 0.3s ease;
	  animation: fadeInUp 0.5s ease forwards;
	  opacity: 0;
	  transform: translateY(20rpx);
	  
	  &:hover {
	    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	    transform: translateY(-2rpx);
	  }
	}
	
	.job-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	  
	  .job-title {
	    font-size: 32rpx;
	    font-weight: 600;
	    color: #303133;
	  }
	  
	  .job-code {
	    font-size: 24rpx;
	    color: #909399;
	    background-color: #F0F2F5;
	    padding: 4rpx 12rpx;
	    border-radius: 4rpx;
	  }
	}
	
	.job-info {
	  display: flex;
	  flex-wrap: wrap;
	  margin-bottom: 20rpx;
	  
	  .info-item {
	    flex: 1;
	    min-width: 50%;
	    margin-bottom: 16rpx;
	    
	    .info-label {
	      font-size: 24rpx;
	      color: #909399;
	      margin-right: 10rpx;
	    }
	    
	    .info-value {
	      font-size: 28rpx;
	      color: #303133;
	    }
	  }
	}
	
	.job-footer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  
	  .job-status {
	    font-size: 24rpx;
	    padding: 4rpx 12rpx;
	    border-radius: 4rpx;
	    font-weight: 500;
	    
	    &.status-active {
	      color: #67c23a;
	      background-color: rgba(103, 194, 58, 0.1);
	    }
	    
	    &.status-inactive {
	      color: #e6a23c;
	      background-color: rgba(230, 162, 60, 0.1);
	    }
	  }
	  
	  .job-create-time {
	    font-size: 24rpx;
	    color: #909399;
	  }
	  
	  .job-actions {
	    display: flex;
	  }
	}
	
	.empty-state {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 60rpx 0;
	  
	  .uni-icons {
	    margin-bottom: 20rpx;
	  }
	  
	  .empty-text {
	    font-size: 28rpx;
	    color: #909399;
	    margin-bottom: 30rpx;
	  }
	}
	
	/* 分页控件 */
	.pagination {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 30rpx 0;
	  position: relative;
	}
	
	.page-btn {
	  width: 70rpx;
	  height: 70rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 28rpx;
	  color: #606266;
	  background-color: #fff;
	  border-radius: 50%;
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	  margin: 0 10rpx;
	  transition: all 0.3s ease;
	  
	  &:active {
	    transform: scale(0.95);
	  }
	  
	  &.disabled {
	    color: #C0C4CC;
	    background-color: #F5F7FA;
	    cursor: not-allowed;
	  }
	  
	  &.active {
	    color: #fff;
	    background-color: #409EFF;
	    box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
	  }
	}
	
	/* 模态框 */
	.modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.5);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 100;
	}
	
	.modal-container {
	  background-color: #fff;
	  border-radius: 16rpx;
	  width: 90%;
	  max-width: 680rpx;
	  box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.12);
	  overflow: hidden;
	  animation: modalFadeIn 0.3s ease forwards;
	}
	
	@keyframes modalFadeIn {
	  from {
	    transform: scale(0.9);
	    opacity: 0;
	  }
	  to {
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	
	.modal-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 30rpx;
	  border-bottom: 1rpx solid #E5E6EB;
	  
	  .modal-title {
	    font-size: 32rpx;
	    font-weight: 600;
	    color: #303133;
	  }
	  
	  .close-btn {
	    width: 40rpx;
	    height: 40rpx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    
	    .uni-icons {
	      font-size: 28rpx;
	    }
	  }
	}
	
	.modal-form {
	  padding: 30rpx;
	}
	
	.form-group {
	  margin-bottom: 30rpx;
	  
	  .form-label {
	    display: block;
	    font-size: 28rpx;
	    color: #303133;
	    margin-bottom: 12rpx;
	    font-weight: 500;
	    
	    .required {
	      color: #F56C6C;
	      margin-left: 4rpx;
	    }
	  }
	  
	  .form-input, .form-textarea {
	    width: 100%;
	    height: 80rpx;
	    background-color: #F5F7FA;
	    border-radius: 8rpx;
	    padding: 0 20rpx;
	    font-size: 28rpx;
	    color: #303133;
	    box-sizing: border-box;
	    border: none;
	    transition: all 0.3s ease;
	    
	    &.input-error {
	      background-color: rgba(245, 108, 108, 0.1);
	    }
	  }
	  
	  .form-textarea {
	    height: 160rpx;
	    padding: 20rpx;
	    resize: none;
	  }
	  
	  .picker {
	    width: 100%;
	    height: 80rpx;
	    background-color: #F5F7FA;
	    border-radius: 8rpx;
	    display: flex;
	    align-items: center;
	    padding: 0 20rpx;
	    font-size: 28rpx;
	    color: #303133;
	    box-sizing: border-box;
	    
	    .picker-content {
	      flex: 1;
	    }
	    
	    .uni-icons {
	      font-size: 28rpx;
	      color: #C0C4CC;
	    }
	  }
	  
	  .status-radio-group {
	    display: flex;
	    background-color: #F5F7FA;
	    border-radius: 8rpx;
	    overflow: hidden;
	    
	    .status-radio-item {
	      flex: 1;
	      text-align: center;
	      padding: 20rpx 0;
	      font-size: 28rpx;
	      color: #606266;
	      cursor: pointer;
	      
	      &.active {
	        color: #409EFF;
	        background-color: rgba(64, 158, 255, 0.1);
	      }
	    }
	  }
	  
	  .error-message {
	    font-size: 24rpx;
	    color: #F56C6C;
	    margin-top: 8rpx;
	    display: block;
	  }
	}
	
	.modal-footer {
	  display: flex;
	  
	  padding: 20rpx 30rpx;
	  border-top: 1rpx solid #E5E6EB;
	  justify-content: space-between;
	  
	  .action-btn {
	    margin-left: 20rpx;
	  }
	}
	
	/* 删除确认弹窗 */
	.delete-confirm-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.5);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 101;
	}
	
	.delete-confirm-container {
	  background-color: #fff;
	  border-radius: 16rpx;
	  width: 90%;
	  max-width: 500rpx;
	  box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.12);
	  padding: 40rpx 30rpx;
	  text-align: center;
	  animation: modalFadeIn 0.3s ease forwards;
	}
	
	.confirm-icon {
	  width: 100rpx;
	  height: 100rpx;
	  background-color: rgba(230, 162, 60, 0.1);
	  border-radius: 50%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin: 0 auto 20rpx;
	  
	  .uni-icons {
	    font-size: 48rpx;
	    color: #E6A23C;
	  }
	}
	
	.confirm-title {
	  font-size: 32rpx;
	  font-weight: 600;
	  color: #303133;
	  margin-bottom: 16rpx;
	}
	
	.confirm-message {
	  font-size: 28rpx;
	  color: #606266;
	  margin-bottom: 30rpx;
	  line-height: 1.5;
	}
	
	.confirm-actions {
	  display: flex;
	  justify-content: center;
	  text-align: center;
	  margin-bottom: 30rpx;
	  .action-btn {
	    width: 35%;
	    margin: 0 10rpx;
	  }
	}
	
	/* 动画效果 */
	@keyframes fadeInUp {
	  from {
	    opacity: 0;
	    transform: translateY(20rpx);
	  }
	  to {
	    opacity: 1;
	    transform: translateY(0);
	  }
	}
</style>
